<script setup>
import { useViewStore } from '@/stores/viewStore.js'
import * as echarts from "echarts"
import { onMounted } from 'vue'
const viewStore = useViewStore()

const initChartLine = () => {
    viewStore.chartLine = echarts.init(document.getElementById("J_chartLineBox"))
    viewStore.chartLine.setOption(viewStore.lineData)
};

const initChartPie = () => {
    viewStore.chartPie = echarts.init(document.getElementById("J_chartPieBox"))
    viewStore.chartPie.setOption(viewStore.pieData)
};

const initChartGauge = () => {
    viewStore.chartGauge = echarts.init(document.getElementById("J_chartGaugeBox"))
    viewStore.chartGauge.setOption(viewStore.gaugeOption)
};


onMounted(() => {
    // var option = 发送axios请求获取option
    viewStore.getViewCountInfo()
    initChartLine();
    initChartPie();
    initChartGauge();
})

</script>

<template>
<div id="fstBox">
    <div id="J_chartLineBox" class="chart-box"></div>
</div>
<div id="secBox">
    <div id="J_chartPieBox" class="chart-box"></div>
    <div id="J_chartGaugeBox" class="chart-box"></div>
</div>

</template>

<style scoped>
.chart-box {
    width: 100%;
    height: 100%;
}
#fstBox {
    height: 200px;
}
#secBox {
    height: 600px;
    display: flex;
    justify-content: space-between; 
}

</style>
